<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <form data-form="search">
        <div class="audit-top">
            <span>角色名</span>
            <span class="input-select">
                <input type="text" name="titleLike" value="" placeholder="角色名模糊搜索"/>
            </span>

            <span class="ml-20">用户</span>
            <span class="input-select">
                <input type="text" name="userLike" value="" placeholder="用户账号或姓名模糊搜索"/>
            </span>

            <span class="ml-20">角色类型</span>
            <span data-select="basicFlag"></span>

            <a class="search-btn ml-20" href="javascript:" data-btn="search">搜索</a>
            <a class="search-btn ml-10 btn-line" href="javascript:" data-btn="addRole">新增角色</a>
        </div>
    </form>
    <div data-list="content" class="table-con  mt-20">

    </div>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>

<script src="/admin/role/js/addRoleDialog.js"></script>
<script src="/admin/role/js/updRoleDialog.js"></script>
<script src="/admin/role/js/delRoleDialog.js"></script>

<!--角色菜单-->
<script src="/ui/pc/js/zTree/3.5.18/js/jquery.ztree.min.js"></script>
<link href="/ui/pc/js/zTree/3.5.18/css/zTreeStyle.css" rel="stylesheet" type="text/css">
<script src="/admin/menu/js/getMenuTree.js"></script>
<script src="/admin/role/js/roleMenuDialog.js"></script>

<!--角色用户-->
<script src="/admin/role/js/roleUserDialog.js"></script>
<script src="/admin/role/js/addRoleUserDialog.js"></script>
<script src="/admin/user/js/selectUserDialog.js"></script>
<script src="/admin/role/js/delRoleUserDialog.js"></script>

<script>
    const $searchForm = $('[data-form="search"]');
    const $listWarp = $('[data-list="content"]');

    const $basicFlagSel = $.getSelect("basicFlag", [
        {name: "请选择", value: ""},
        {name: "普通角色", value: 0},
        {name: "基础角色", value: 1},
    ]);
    $searchForm.find('[data-select="basicFlag"]').replaceWith($basicFlagSel);

    const listHandler = $.commonList({
        $warp: $listWarp,
        column: [
            {title: "角色名", value: "title"},
            {title: "标识", value: "roleSign"},
            {
                title: "角色类型", value: data => {
                    const {basicFlag} = data;
                    return basicFlag === 1 ? "基础角色" : "普通角色";
                }
            },
            {title: "添加时间", value: "addTime"},
            {
                title: "操作", value: data => {
                    const {basicFlag, roleSign} = data;
                    const $updBtn = $('<a href="javascript:" class="c-btn btn-blue m5">编辑</a>');
                    const $userBtn = $('<a href="javascript:" class="c-btn btn-gray m5">组员</a>');
                    const $menuBtn = $('<a href="javascript:" class="c-btn btn-gray m5">菜单</a>');
                    const $delBtn = $('<a href="javascript:" class="c-btn btn-red m5">删除</a>');

                    $updBtn.on("click", () => {
                        updRoleDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    });

                    $menuBtn.on("click", () => {
                        roleMenuDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    })

                    $userBtn.on("click", () => {
                        roleUserDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    });

                    $delBtn.on("click", () => {
                        delRoleDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    })

                    //控制操作按钮
                    const $dom = $('<div></div>');
                    if (!basicFlag) {
                        $dom.append($updBtn);
                    }

                    $dom.append($menuBtn);

                    if (roleSign !== "public") {
                        $dom.append($userBtn);
                    }

                    if (!basicFlag) {
                        $dom.append($delBtn);
                    }

                    return $dom;
                }
            },
        ],
        dataSource: (currPage, callback) => {
            const param = $.getFormData($searchForm);
            param.pageIndex = currPage;
            param.pageSize = 10;
            queryRolePage(param, ({Code, Message, Result = [], Total}) => {
                if (Code !== 10000) {
                    return callback(Message, 0);
                }

                return callback(Result, Total, param.pageSize);
            });
        }
    });

    //搜索按钮
    $searchForm.find('[data-btn=search]').on("click", () => {
        listHandler.getPage(1);
    });

    //新增按钮
    $searchForm.find('[data-btn=addRole]').on("click", () => {
        addRoleDialog(() => {
            listHandler.getPage(1);
        });
    });

    function queryRolePage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/Role/queryRolePage"
        }, callback)
    }

</script>
</body>
</html>